<template>
  <div class="reco">
    <div class="my-carousel">
      <Carousel />
    </div>
    <!-- songlist -->
    <div class="songlist-area">
      <div class="reco-title">推荐歌单</div>
      <div class="song-sheet-part" v-for="(item, n) in song_list" :key="n" @click="toSongSheet(item)">
        <SongList :name="item.name" :picUrl="item.picUrl"></SongList>
      </div>
    </div>
    <!-- songlist -->
    <div class="songlist-area">
      <div class="reco-title">推荐电台</div>
      <div class="song-sheet-part" v-for="(item, n) in song_list2" :key="n" @click="toSongSheet(item)">
        <SongList :name="item.name" :picUrl="item.picUrl"></SongList>
      </div>
    </div>
    <!-- songlist -->
    <div class="songlist-area">
      <div class="reco-title">推荐新音乐</div>
      <div class="song-sheet-part" v-for="(item, n) in song_list3" :key="n" @click="toSongSheet(item)">
        <SongList :name="item.name" :picUrl="item.picUrl"></SongList>
      </div>
    </div>
    <!-- songlist -->
    <div class="songlist-area">
      <div class="reco-title">推荐节目</div>
      <div class="song-sheet-part" v-for="(item, n) in song_list4" :key="n" @click="toSongSheet(item)">
        <SongList :name="item.name" :picUrl="item.picUrl"></SongList>
      </div>
    </div>
    <!-- songlist -->
    <div class="songlist-area">
      <div class="reco-title">独家放送</div>
      <div class="song-sheet-part" v-for="(item, n) in song_list5" :key="n" @click="toSongSheet(item)">
        <SongList :name="item.name" :picUrl="item.picUrl"></SongList>
      </div>
    </div>

    <!-- latest music -->
    <div class="reco-songs">
      <div class="reco-title">最新音乐</div>
      <div v-for="(song, idx) in songs" :key="idx">
        <SongInfo
            :song_name="song.name"
            :song_art="songs_artist[idx]"
            :song_album="song.song.album"
            :song_belong_playlist="sblst"
            :song_id="song.id"
            :song_alias="songs_alias[idx]"
        ></SongInfo>
      </div>
    </div>
  </div>
</template>

<script>
import SongList from "@/components/SongList";
import SongInfo from "@/components/SongInfo";
import Carousel from "@/components/Carousel";

export default {
  name: "recommend",
  created() {
    /* axios */
    this.axios.get("/personalized").then(res => {
      res.data.result.forEach((item, index) => {
        if (index < 6) {
          this.song_list.push(item);
        } else if (index < 12) {
          this.song_list2.push(item);
        } else if (index < 18) {
          this.song_list3.push(item);
        } else if (index < 24) {
          this.song_list4.push(item);
        } else {
          this.song_list5.push(item);
        }
      });
    });
    this.axios.get("/personalized/newsong").then(res => {
      this.songs.splice(0, this.songs.length);
      res.data.result.forEach(element => {
        this.songs.push(element);
        this.sblst.push([
          element.id,
          element.song.album.picUrl,
          element.name,
          element.song.artists[0].name
        ]);
      });
    });
  },
  data() {
    return {
      song_list: [],
      song_list2: [],
      song_list3: [],
      song_list4: [],
      song_list5: [],
      songs: [],
      sblst: [],
      id: ""
    };
  },
  computed: {
    song_list_id: function() {
      let arr_id = [];
      this.song_list.forEach(ele => {
        arr_id.push(ele.id);
      });
      return arr_id;
    },
    songs_id: function() {
      let arr_id = [];
      this.songs.forEach(ele => {
        arr_id.push(ele.id);
      });
      return arr_id;
    },
    songs_artist: function() {
      let arr_art = [];
      this.songs.forEach(element => {
        let art_ls = element.song.artists;
        let str_as = art_ls[0].name;
        if (art_ls.length > 1) {
          art_ls.forEach(ele => {
            let str_nm = ele.name;
            str_as += "/" + str_nm;
          });
        }
        arr_art.push(str_as);
      });
      return arr_art;
    },
    songs_alias: function() {
      let arr_alias = [];
      this.songs.forEach(element => {
        let alias = element.song.alias;
        if (alias.length !== 0) {
          arr_alias.push(alias[0]);
        } else {
          arr_alias.push("");
        }
      });
      return arr_alias;
    }
  },
  methods: {
    toSongSheet(e) {
      console.log(e.id);
      this.$router.push({
        name: "songsheet",
        params: { id: e.id }
      });
    }
  },
  components: {
    SongList,
    SongInfo,
    Carousel
  }
};
</script>

<style lang="scss" scoped>
.reco {
  margin-top: 48px;
  margin-bottom: 60px;
}
.reco-title {
  padding: 5px;
  font-size: 16px;
  // background-color: rgba($color: #000000, $alpha: 0.15);
  color: #eeeeee;
  text-align: left;
}
.songlist-area,
.reco-songs {
  padding: 5px;
  // border-top: 1px solid rgba($color: #ffffff, $alpha: 0.15)
}
.song-sheet-part {
  display: inline-block;
  vertical-align: top;
  width: 33.33%;
}
</style>
